<template>
	<view>
		<backPages backtext='返回'></backPages>
	</view>

	<view class="nav">
		<view class="head">
			<h1>您好,</h1>
			<strong>欢迎来到园丁，新人
				<navigator url="/pages/register/register">
					<a href="">注册</a>
				</navigator>
			</strong>
		</view>
		<view class="iphone">
			<input type="number" v-model="username" placeholder="输入手机号" @input="clearInput" />
			<!-- <uni-icons type="closeempty" color="#808080" size="25" v-if="showClearIcon" @click="clearIcon"></uni-icons> -->
		</view>
		<view class="password">
			<!-- <input type="password" placeholder="输入密码" /> 要显示密码就不要设置type="password"-->
			<input placeholder="请输入密码" v-model="password" :password="showPassword" />
			<!-- <uni-icons type="eye-filled" color="#808080" size="25" @click="changePassword"></uni-icons> -->
		</view>
		<view class="bottom">
			<navigator url="/pages/forget/forget" style="text-align: left;">
				<span>忘记密码</span>
			</navigator>
			<navigator url="/pages/Authentication/Authentication">
				<span>验证码登录</span>
			</navigator>
		</view>
		<button type="primary" @click="addLogin">登录</button>
		<view class="agreement">
			<checkbox-group>
				<label>
					<checkbox value="cb" checked="true" color="#55aaff"
						style="transform:scale(1)background-color: blue" />
				</label>
			</checkbox-group>
			<span>
				同意<b>(园丁用户服务协议)</b>和<b>(隐私协议)</b>
			</span>
		</view>
		
		<view class="modal-mask" v-if="showModal">
			<view class="modal-wrapper">
				<view class="modal-container">
					<h3>{{ modalTitle }}</h3>
					<p>{{ modalMessage }}</p>
					<view class="modal-buttons">
						<button @click="cancelModal">取消</button>
						<button @click="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import {loging} from "@/utils/ajax.js";
	import { ref,reactive,onBeforeMount } from "vue"
	import { useRouter } from 'vue-router'
	

	
	const router = useRouter(); // 获取路由
	
	
	const username = ref("")
	const password = ref("")
	
	// 添加错误提示模态框相关逻辑
	const showModal = ref(false)
	const modalTitle = ref('')
	const modalMessage = ref('')
	
	function addLogin() {
		 loging("", username.value, password.value)
		    .then(res => {
		      console.log(res);
		      // 处理登录请求成功的逻辑
			  if (res.data.api_code === 200) {
			    showModal.value = true;
			    modalTitle.value = "提示";
			    modalMessage.value = "登陆成功";
				uni.setStorageSync("token",res.data.token)
				showModal.value = false
			    // 注册成功后跳转到登录页面
				uni.reLaunch({
				  url: `/pages/index/index?areaName=${res.data.user.park.name}&lunImg=${res.data.user.park.park_id}`
				});
			  } else {
			    showModal.value = true;
			    modalTitle.value = "错误提示";
			    modalMessage.value = res.data.api_msg || "未知错误";
			  }
		    })
		    .catch(error => {
		      console.error(error);
		      // 处理登录请求失败的逻辑
		    });
	}
	
	// 点击错误提示模态框的取消按钮
	function cancelModal() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}
	
	// 点击错误提示模态框的确定按钮
	function confirmModal() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}
</script>

<style scoped>
	.head {
		position: relative;
		width: 700rpx;
		height: 260rpx;
		top: 100rpx;
		/* border: 1px solid; */
		margin: 0 auto;
	}

	strong {
		display: block;
		width: 100%;
		height: 100rpx;
		/* background-color: aqua; */
		margin-top: 50rpx;
	}

	strong a {
		text-decoration: none;
		color: #55aaff;
	}

	.iphone,
	.password {
		position: relative;
		width: 700rpx;
		height: 150rpx;
		margin-bottom: 30px;
		border-bottom: 1px solid #e3e3e3;
		margin: 0 auto;
		top: 50px;
	}

	input {
		width: 700rpx;
		height: 150rpx;
		font-size: 20px;
		line-height: 150rpx;
	}

	.iphone .uni-icons,
	.password .uni-icons {
		position: absolute;
		top: 14px;
		right: 30px;
	}

	.bottom {
		position: relative;
		width: 700rpx;
		top: 170rpx;
		margin: 0 auto;
	}

	.bottom span {
		display: inline-block;
		width: 340rpx;
		color: #686868;
		font-size: 17px;
		/* border: 1px solid; */
	}

	.bottom span:nth-child(2) {
		text-align: right;
	}

	.agreement {
		position: relative;
		width: 600rpx;
		height: 70rpx;
		/* background-color: antiquewhite; */
		top: 230px;
		margin: 0 auto;
	}

	checkbox-group {
		display: inline-block;
	}

	.agreement span {
		/* border:1px solid; */
		display: inline-block;
	}

	.agreement span b {
		color: #55aaff;
	}

	button {
		width: 600rpx;
		position: relative;
		top: 130px;
	}

	navigator {
		display: inline-block;
		text-align: right;
	}
	
	
	
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.modal-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.modal-container {
		width: 300px;
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
	}
	
	.modal-buttons {
		display: flex;
		justify-content: space-between;
	}
</style>
